import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ScrollView } from 'react-native';

import styled from 'styled-components';
import { queryMailRegisterList, queryPrisonByCount } from '../../api';
import { getToken } from '../../utils/auth';
import { Actions } from 'react-native-router-flux';

export default class lettersRegister extends Component {
  state = {
    imgUrl: [
      require('../../assets/work/sportsRankings/backtrack.png'),
      require('../../assets/work/lettersRegister/add.png')
    ],
    letterInfo: [],
    isInsertLetter: false
  };
  componentDidMount() {
    getToken().then(token => {
      queryMailRegisterList(token)
        .then(res => {
          this.setState({
            letterInfo: [1]
          });
          const info = [];
          res.data.forEach(item => {
            console.log(item);
            info.push(...info, item);
          });
          this.setState({
            letterInfo: info
          });
        })
        .catch(error => {
          this.setState({
            error: true,
            errorInfo: error
          });
        });
    });
  }

  render() {
    return (
      <View style={{ backgroundColor: '#fff' }}>
        <HeadView
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            flex: 1
          }}>
          <OnTouchableOpacity onPress={() => Actions.home()}>
            <View style={{ backgroundColor: '#fff' }}>
              <Image
                source={this.state.imgUrl[0]}
                style={{ width: 30, height: 20, margin: 5 }}
              />
            </View>
          </OnTouchableOpacity>
          <OnTouchableOpacity
            onPress={() => {
              this.setState({ isInsertLetter: true });
            }}
            style={{ position: 'absolute', right: 1 }}>
            <View>
              <Image
                source={this.state.imgUrl[1]}
                style={{ width: 25, height: 25, marginRight: 10 }}
              />
            </View>
          </OnTouchableOpacity>
        </HeadView>
        <View style={{ flexDirection: 'row' }}>
          <MovementTextTitle>信件登记</MovementTextTitle>
          {this.state.isInsertLetter ? (
            <OnTouchableOpacity
              style={{
                top: 25,
                left: 120
              }}
              onPress={() => {
                this.setState({ isInsertLetter: false });
                Actions.insertLetter();
              }}>
              <View
                style={{
                  backgroundColor: '#333333',
                  width: 120,
                  height: 45
                }}>
                <Text
                  style={{
                    textAlign: 'center',
                    top: 8,
                    color: '#fff',
                    width: 120,
                    height: 25,
                    fontSize: 18
                  }}>
                  信件登记
                </Text>
              </View>
            </OnTouchableOpacity>
          ) : null}
        </View>
        <ScrollView
          style={{
            height: 800,
            backgroundColor: '#fff',
            position: 'relative'
          }}>
          <View style={{ margin: 10 }}>
            {this.state.letterInfo.map(item => {
              return (
                <View
                  style={{
                    backgroundColor: '#fff',
                    borderRadius: 10,
                    borderWidth: 1
                  }}>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>罪犯姓名：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrPrisonerName}</InfoText>
                  </LetterView>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>罪犯部门：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrPrisonAreaNo}</InfoText>
                  </LetterView>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>登记时间：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrDate}</InfoText>
                  </LetterView>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>信件地址：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrMailSite}</InfoText>
                  </LetterView>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>登记民警：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrPoliceName}</InfoText>
                  </LetterView>
                  <LetterView>
                    <AppraisalView>
                      <AppraisalText>内容概述：</AppraisalText>
                    </AppraisalView>
                    <InfoText>{item.mrExplain}</InfoText>
                  </LetterView>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const MovementTextTitle = styled.Text`
  font-size: 40;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const HeadView = styled.View``;
const AppraisalView = styled.View`
  background-color: #7667fe;
`;
const AppraisalText = styled.Text`
  margin-left: 5;
  font-size: 20;
  color: #fff;
`;
const InfoText = styled.Text`
  margin-left: 5;
  color: #070707;
  font-size: 20;
  background-color: #fff;
`;
const LetterView = styled.View`
  flex-direction: row;
  flex: 1;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
